<template>
  <van-nav-bar
    title="我的关注"
    @click-left="routerBack()"
    :fixed="true"
    :safe-area-inset-top="true"
    :placeholder="true"
    left-arrow
  />
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-swipe-cell>
      <van-cell>
        <template #title>
          <div class="title-wrapper">
            <div class="commentImg">
              <!-- <img :src="" alt="" /> -->
            </div>
            <div class="commentBy">{{}}</div>
          </div>
        </template>
        <div class="wrods-wrapper">
          {{ item.words }}
        </div>
        <div class="time">
          {{ item.time }}
        </div>
      </van-cell>
      <template #right>
        <van-button square type="default" text="删除" />
      </template>
    </van-swipe-cell>
  </van-list>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
export default {
  setup() {
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          state.list.push(state.list.length + 1);
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true;
        }
      }, 1000);
    };
    const router = useRouter();
    onBeforeMount(() => {});

    const routerBack = () => {
      router.go(-1);
    };
    return { ...toRefs(state), routerBack, onLoad };
  },
};
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  .commentImg {
    img {
      width: 30px;
      height: 30px;
      border-radius: 50px;
    }
  }
  .commentBy {
    margin: 0 10px;
    font-size: 10px;
    font-weight: 700;
  }
}
</style>
